<template>
	<view style="flex-wrap: wrap" v-if="list.length">
		<view v-for="(e,i) in list" :key="i">
			<view class="card">
				<view @click="btnClick(1,i)">
					<view class="order_div">
						<view class="orderNo">订单号：{{e.order_no}}</view>
						<view class="orderStatus">{{getStatusText(e.status)}}</view>
					</view>
					<view class="flex-1 flex align-center padding3">
						<image :src="e.brand_logo" class="logo" />
						<text class="brand_name">{{e.merchant_name}}</text>
						<uv-icon name="arrow-right" color="#999" size="12" />
					</view>
					<view class="flex padding2" v-for="(a,j) in e.order_info">
						<image :src="a.product_image" class="thumb" />
						<view class="flex-1 flex align-start justify-between">
							<view class="skus">
								<text class="pName">{{a.product_name}}</text>
								<uv-gap height="5" bgColor="transparent" v-if="a.spec_values" />
								<view class="tags" v-if="a.spec_values">{{a.spec_values}}</view>
							</view>
							<view class="jiage">
								<view class="t1">￥{{a.price}}</view>
								<view class="t2">x{{a.cart_num}}</view>
								<view class="btn" @click.stop="btnClick(5,i,j)"
									v-if="(e.status==2 || e.status==3) && a.after_sales_id==0">申请退款</view>
								<view class="btn" @click.stop="btnClick(9,i,j)" v-if="a.after_sales_id>0">
									售后详情</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tj info">
					<text>共{{e.order_goods_num}}件商品</text>
					<text>应付:</text>
					<text>￥</text>
					<text>{{e.pay_price}}</text>
					<text v-if="e.freight">({{e.freight}})</text>
				</view>
				<view class="tool">
					<template v-if="e.status===1">
						<uv-button text="取消订单" @click="btnClick(2, i)" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
						<uv-button text="立即支付" @click="btnClick(4, i)" color="#BC2722" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
					</template>
					<template v-if="e.status===3">
						<uv-button text="查看物流" @click="btnClick(6, i)" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
						<uv-button text="确认收货" @click="btnClick(7, i)" color="#BC2722" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
					</template>
					<template v-if="e.status===7">
						<uv-button text="查看物流" @click="btnClick(6, i)" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
						<uv-button text="删除订单" @click="btnClick(3, i)" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
					</template>
					<template v-if="e.status===4">
						<uv-button text="查看物流" @click="btnClick(6, i)" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
						<uv-button text="去评价" @click="btnClick(8, i)" color="#BC2722" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
					</template>
					<template v-if="e.status===5">
						<uv-button text="删除订单" @click="btnClick(3, i)" customTextStyle="font-size:12px;"
							customStyle="height:32px;" />
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	defineProps({
		list: {
			type: Array,
			default: () => []
		}
	})
	const emit = defineEmits(['btnClick'])
	const getStatusText = (status) => {
		const statusMap = {
			1: '待付款',
			2: '待发货',
			3: '待收货',
			4: '待评价',
			5: '交易已取消',
			6: '已售后',
			7: '已完成'
		}
		return statusMap[status] || '未知状态'
	}
	const btnClick = (type, i, j = 0) => emit('btnClick', {type,i,j})
</script>

<style lang="scss" scoped>
	.card {
		margin-top: 30upx;
		background-color: #fff;

		.brand_name {
			color: #333;
			font-size: 28upx;
			margin-right: 10upx;
		}
	}
	
	.order_div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx 20upx 20upx;
		border-bottom: #eee 1px solid;
	}

	.padding1 {
		padding: 20upx 30upx 20upx 20upx;
	}

	.padding2 {
		padding: 0 20upx 0 20upx;
		// margin-bottom: 20upx;
	}

	.padding3 {
		padding: 10upx 0 10upx 20upx;
	}

	.margin10 {
		margin-right: 10upx;
	}

	.margin20 {
		margin: 20upx 20upx 20upx 0;
	}

	.mt20 {
		margin-top: 20upx;
	}

	.orderNo {
		font-size: 24upx;
	}

	.orderStatus {
		color: #BC2722;
		font-size: 24upx;
	}

	.logo {
		width: 40upx;
		height: 40upx;
		border-radius: 6upx;
		margin-right: 10upx;
	}

	.t1 {
		color: #333;
		font-size: 26upx;
		text-align: right;
	}

	.t2 {
		color: #979797;
		font-size: 22upx;
		text-align: right;
	}

	.thumb {
		width: 120upx;
		height: 120upx;
		border-radius: 6upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}

	.skus {
		.pName {
			font-size: 26upx;
			color: #333;
		}

		.tags {
			background: #F2F2F2;
			color: #333;
			display: inline-flex;
			border-radius: 6upx;
			font-size: 24upx;
			padding: 4upx 15upx;
		}
	}

	.jiage {
		margin-left: 20upx;

		.btn {
			margin-top: 3px;
			color: #333;
			font-size: 12px;
			text-align: center;
			border: 1upx solid #f2f2f2;
			padding: 5upx 8upx;
			border-radius: 5upx;
			width: 56px;
		}
	}
	
	.tj {
		border-top:#eee 1px solid;
		border-bottom: #eee 1px solid;
		padding: 20upx 30upx 20upx 20upx;
	}

	.info {
		text-align: right;

		text {
			&:nth-child(1) {
				color: #979797;
				font-size: 24upx;
				margin-right: 10upx;
			}

			&:nth-child(2) {
				color: #333;
				font-size: 24upx;
			}

			&:nth-child(3) {
				color: #333;
				font-size: 20upx;
			}

			&:nth-child(4) {
				color: #333;
				font-size: 30upx;
				margin-right: 10upx;
			}

			&:nth-child(5) {
				color: #333;
				font-size: 24upx;
			}
		}
	}

	.tool {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}
</style>